使用canvas把照片旋转任意角度

2024-01-16 16:10| 来源: 网络整理| 查看: 265

今天想着更新下水印 watermark-plus，增加图片水印功能。

这样需要将图片画成 canvas，并且在画之前还要支持任意角度的旋转图片。

index.html

旋转转换 canvas { border: 1px solid red; } 您的浏览器版本过低,请升级浏览器

index.js

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 600; canvas.height = 400; const rotate = 0; // 画两条相交垂线做观察 context.moveTo(0, canvas.height / 2); context.lineTo(canvas.width, canvas.height / 2); context.stroke(); context.beginPath(); context.moveTo(canvas.width / 2, 0); context.lineTo(canvas.width / 2, canvas.height); context.stroke(); // 1. 实例化Image对象 const img = new Image(); // 2. 给Image对象设置src属性 img.src = '../images/my.svg'; img.setAttribute('crossOrigin', 'Anonymous'); // 3. 浏览器读取图片时间需要等待图片读取完成 img.onload = () => { // 4. 平移转换，改变画笔的原点位置为画布的中心点 context.translate(canvas.width / 2, canvas.height / 2); // 5. 旋转转换，改变画笔的旋转角度 context.rotate((rotate * Math.PI) / 180); // 6. 调用绘制图片的方法把图片绘制到canvas中 context.drawImage(img, 0, 0); };

可以得到下面的图

这个时候上下文画笔的坐标系原点已经是画布的中心点了，图片的起始点在坐标系原点，这个时候我们利用 context.drawImage 的第二第三参数将图片中心点平移至坐标系原点

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 600; canvas.height = 400; const rotate = 0; // 画两条相交垂线做观察 context.moveTo(0, canvas.height / 2); context.lineTo(canvas.width, canvas.height / 2); context.stroke(); context.beginPath(); context.moveTo(canvas.width / 2, 0); context.lineTo(canvas.width / 2, canvas.height); context.stroke(); const img = new Image(); img.src = '../images/my.svg'; img.setAttribute('crossOrigin', 'Anonymous'); img.onload = () => { // 平移转换，改变画笔的原点位置为画布的中心点 context.translate(canvas.width / 2, canvas.height / 2); // 旋转转换，改变画笔的旋转角度 context.rotate((rotate * Math.PI) / 180); // 调用绘制图片的方法把图片绘制到canvas中 context.drawImage(img, -img.width / 2, -img.height / 2); };

这是画布内容就是下面图片了：在这里插入图片描述

可以看到图片已经居中了，那么下面我们调整旋转角度测试一下

将旋转角度改为30 在这里插入图片描述

将旋转角度改为90 在这里插入图片描述

将旋转角度改为220 在这里插入图片描述

将旋转角度改为330 在这里插入图片描述

可以看到，图片一直以上下文坐标系原点为中心旋转，而上下文坐标系原点此时为画布的中心点；

那么说到这里你应该联想到了，上下文坐标系的原点被改变了，在后面的整个上下文画笔的坐标系都将会改变

因此我们需要将坐标系恢复到原有正常的状态，这时候就需要使用 restore()了

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 600; canvas.height = 400; const rotate = 330; // 画两条相交垂线做观察 context.moveTo(0, canvas.height / 2); context.lineTo(canvas.width, canvas.height / 2); context.stroke(); context.beginPath(); context.moveTo(canvas.width / 2, 0); context.lineTo(canvas.width / 2, canvas.height); context.stroke(); const img = new Image(); img.src = '../images/my.svg'; img.setAttribute('crossOrigin', 'Anonymous'); img.onload = () => { // 平移转换，改变画笔的原点位置为画布的中心点 context.translate(canvas.width / 2, canvas.height / 2); // 旋转转换，改变画笔的旋转角度 context.rotate((rotate * Math.PI) / 180); // 调用绘制图片的方法把图片绘制到canvas中 context.drawImage(img, -img.width / 2, -img.height / 2); // 还原坐标系 context.translate(-canvas.width / 2, -canvas.height / 2); context.rotate(-rotate * (Math.PI / 180)); // 使用 restore()进行恢复 context.restore(); };

这个时候的画布内容是没有变化的，还是我们想要的结果在这里插入图片描述

【本文地址】

公司简介

联系我们